import React, { FC, useEffect, useRef, useState } from 'react'
import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import BlankPage from '@/components/BlankPage'
import api from '@/services/config/index'
import './index.scss'

interface UserInfo {
  // userId
  userId: string
  // 用户图像
  avatarUrl: string
}
type MessageList = Array<{
  buyUser: {
    buyAatarUrl: string
    buyName: string
    buyUserId: string
  }
  messageTime: string
  sellUser: {
    sellAatarUrl: string
    sellName: string
  }
  message: string
  orderId: string
}>
const MessageList: FC = () => {
  const pageNoRef = useRef<number>(1) // 当前页
  const isFinished = useRef<boolean>(false) //是否加载完
  const pageSizeRef = useRef<number>(15) // 一页多少条
  const [userInfo, setUserInfo] = useState<UserInfo>({
    userId: '',
    avatarUrl: ''
  })
  const [messageList, setMessageList] = useState<MessageList>([])
  const [showBlankPage, setShowBlankPage] = useState<boolean>(false)
  function getMessageList(type = 'pullDown') {
    if (isFinished.current) return
    api['chartOnline/getMessageList']({
      pageSize: pageSizeRef.current,
      pageNo: pageNoRef.current
    })
      .then((res) => {
        const data = res.data
        Taro.stopPullDownRefresh()
        if (data.length < pageSizeRef.current - 1) {
          isFinished.current = true
        }

        if (type === 'reachBottom') {
          pageNoRef.current += 1
          setMessageList((pre) => {
            return [...pre, ...data]
          })
        } else {
          setMessageList(data)
        }
      })
      .catch(() => {
        if (pageNoRef.current === 1) {
          setShowBlankPage(true)
        }
        isFinished.current = true
      })
  }
  useEffect(() => {
    let _userInfo = Taro.getStorageSync('userInfo')
    _userInfo = JSON.parse(_userInfo)
    setUserInfo(_userInfo)
    getMessageList()
  }, [])
  // 下拉刷新
  usePullDownRefresh(() => {
    isFinished.current = false
    pageNoRef.current = 1
    getMessageList()
  })
  // 上拉加载
  useReachBottom(() => {
    getMessageList('reachBottom')
  })
  return (
    <View className='messageList'>
      {messageList.map((item, index) => {
        return (
          <View
            className='messageList-main flex b-bottom'
            key={index}
            onClick={() => {
              const name =
                item.buyUser.buyUserId === userInfo.userId
                  ? item.sellUser.sellName
                  : item.buyUser.buyName
              Taro.navigateTo({
                url: '/pages/ChartOnline/index?orderId=' + item.orderId + '&name=' + name
              })
            }}
          >
            {item.buyUser.buyUserId === userInfo.userId ? (
              <Image className='messageList-main__ava' src={item.sellUser.sellAatarUrl}></Image>
            ) : (
              <Image className='messageList-main__ava' src={item.buyUser.buyAatarUrl}></Image>
            )}

            <View className='messageList-main__user'>
              {item.buyUser.buyUserId === userInfo.userId ? (
                <View className='messageList-main__ava-name font28'>{item.sellUser.sellName}</View>
              ) : (
                <View className='messageList-main__ava-name font28'>{item.buyUser.buyName}</View>
              )}

              <View className='messageList-main__ava-tips grey-color font24 ellipsis'>
                {item.message}
              </View>
            </View>
            <View className='messageList-main__ava-date grey-color font24'>{item.messageTime}</View>
          </View>
        )
      })}
      {showBlankPage && <BlankPage />}
    </View>
  )
}

export default MessageList
